<template>
    <div class="authorize">
        <Row type="flex" justify="center" align="middle" @keydown.enter.native="submit" style="height: 100%">
            <Col class="content" :style="{ width: userInfo ? '450px' : '390px' }">
                <div>
                    <div class="logos-wrap">
                        <div class="logos">
                            <Avatar :src="site.logo" :style="{ background: '#fff' }" size="96" class="top site-logo" />
                            <Icon type="ios-checkmark-circle" color="#52c41a" size="32" class="top"></Icon>
                            <Avatar :src="require('@/assets/logo-min.png')" :style="{ background: '#f1f2f5' }" size="96" class="top" />
                            <div class="line"></div>
                        </div>
                        <div class="auth-title">{{ $t('authorize') }} {{ site.name }}</div>
                    </div>
                    <Row v-if="!error && !authLoading && !userInfo">
                        <Tabs value="1">
                            <TabPane :label="$t('sso')" name="1" icon="md-people">
                                <Form ref="loginForm" :model="form" :rules="rules" class="form">
                                    <FormItem prop="username">
                                        <Input v-model="form.username" prefix="ios-contact" size="large" clearable placeholder="账号/邮箱/手机号" autocomplete="off" />
                                    </FormItem>
                                    <FormItem prop="password">
                                        <Input type="password" v-model="form.password" prefix="ios-lock" size="large" clearable placeholder="请输入密码" autocomplete="off" />
                                    </FormItem>
                                    <FormItem prop="code">
                                        <Row type="flex" justify="space-between" style="align-items: center; overflow: hidden">
                                            <Input v-model="form.code" size="large" clearable placeholder="请输入图片验证码" :maxlength="10" style="width: 67%" />
                                            <div class="code-image" style="position: relative; font-size: 12px">
                                                <Spin v-if="loadingCaptcha" fix></Spin>
                                                <img :src="captchaImg" @click="getCaptchaImg" alt="加载验证码失败" style="width: 110px; cursor: pointer; display: block" />
                                            </div>
                                        </Row>
                                    </FormItem>
                                </Form>
                            </TabPane>
                        </Tabs>
                        <Row>
                            <Button type="primary" size="large" :loading="loading" @click="submit" long>
                                <span v-if="!loading">{{ $t('authorizeAndSignin') }}</span>
                                <span v-else>{{ $t('authorizing') }}</span>
                            </Button>
                        </Row>
                        <Row type="flex" justify="space-between" class="other-thing">
                            <router-link to="/reset" class="back">{{ $t('forgetPass') }}</router-link>
                            <router-link to="/regist" class="back">
                                {{ $t('registerNow') }}
                            </router-link>
                        </Row>
                    </Row>
                    <div v-if="!error && !authLoading && userInfo">
                        <Card dis-hover :padding="0" v-if="!error">
                            <div class="auth-card">
                                <div class="auth-info-wrap">
                                    <div class="auth-detail" style="margin-bottom: 25px">
                                        <Avatar :src="userInfo.avatar" :style="{ background: '#fff' }" size="40" class="auth-pic" />
                                        <div>
                                            <a :href="site.homeUri" target="_blank" class="auth-detail-href">{{ site.name }}</a>
                                            <div class="auth-detail-sub-title">
                                                {{ $t('wants') }}
                                                <span class="auth-detail-strong">{{ userInfo.username }}</span>
                                                {{ $t('wants2') }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="auth-detail" style="margin-bottom: 15px">
                                        <Icon type="md-person" color="#6a737d" size="40" class="auth-pic"></Icon>
                                        <div>
                                            <div class="auth-detail-title">
                                                {{ $t('authAquire') }}
                                            </div>
                                            <div class="auth-detail-sub-title">
                                                {{ $t('aquireInfo') }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <Row class="button-confirm">
                                    <Button type="primary" size="large" :loading="loading" @click="confirm" long>
                                        <span v-if="!loading">{{ $t('authorize') }}</span>
                                        <span v-else>{{ $t('authorizing') }}</span>
                                    </Button>
                                </Row>
                                <Row class="to-wrap">
                                    <div>{{ $t('afterAuth') }}</div>
                                    <div class="to-strong">{{ site.homeUri }}</div>
                                </Row>
                            </div>
                        </Card>
                    </div>
                    <div v-if="error && !authLoading" style="margin-top: 15vh">
                        <Alert type="error" show-icon>
                            {{ title }}
                            <span slot="desc">{{ msg }}</span>
                        </Alert>
                    </div>
                    <div v-if="authLoading">
                        <RectLoading />
                    </div>
                </div>
                <Footer />
            </Col>
            <LangSwitch />
        </Row>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
import { initCaptcha, drawCodeImage, userInfo } from '@/api/index';
import { siteInfo, authorize, authorized } from '@/api/open';
import Footer from '@/views/main-components/footer';
import LangSwitch from '@/views/main-components/lang-switch';
import RectLoading from '@/views/my-components/xboot/rect-loading';
export default {
    components: {
        LangSwitch,
        Footer,
        RectLoading
    },
    data() {
        return {
            authLoading: true,
            title: '',
            msg: '',
            error: false,
            loadingCaptcha: true,
            captchaImg: '',
            loading: false,
            userInfo: {},
            site: {
                name: '',
                homeUri: '',
                logo: '',
                autoApprove: false
            },
            form: {
                username: '',
                password: '',
                code: '',
                client_id: '',
                redirect_uri: '',
                state: '',
                response_type: '',
                captchaId: this.captchaId
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: '账号不能为空',
                        trigger: 'change'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '密码不能为空',
                        trigger: 'change'
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '验证码不能为空',
                        trigger: 'change'
                    }
                ]
            }
        };
    },
    methods: {
        init() {
            let q = this.$route.query;
            if (!q.client_id) {
                this.title = '参数client_id非法';
                this.msg = 'The parameter client_id is illegal.';
                this.error = true;
                return;
            }
            if (!q.redirect_uri) {
                this.title = '参数redirect_uri非法';
                this.msg = 'The parameter redirect_uri is illegal.';
                this.error = true;
                return;
            }
            if (!q.state) {
                this.title = '参数state非法';
                this.msg = 'The parameter state is illegal.';
                this.error = true;
                return;
            }
            this.form.client_id = q.client_id;
            this.form.redirect_uri = q.redirect_uri;
            this.form.state = q.state;
            this.form.responseType = q.responseType;
            this.getSiteInfo(this.form.client_id);
        },
        getSiteInfo(v) {
            siteInfo(v).then(res => {
                if (res.success) {
                    this.site = res.result;
                    this.isAuthed();
                } else {
                    this.error = true;
                    this.title = res.message;
                    this.authLoading = false;
                }
            });
        },
        isAuthed() {
            // 判断是否认证过
            let userInfo = Cookies.get('userInfo');
            this.userInfo = userInfo;
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo);
                // 自动授权
                if (this.site.autoApprove) {
                    authorized(this.form).then(res => {
                        if (res.success) {
                            let url = res.result.redirect_uri + '?code=' + res.result.code + '&state=' + res.result.state;
                            window.location.href = url;
                        } else {
                            this.authLoading = false;
                        }
                    });
                } else {
                    this.authLoading = false;
                }
            } else {
                this.authLoading = false;
            }
        },
        confirm() {
            this.loading = true;
            authorized(this.form).then(res => {
                this.loading = false;
                if (res.success) {
                    let url = res.result.redirect_uri + '?code=' + res.result.code + '&state=' + res.result.state;
                    window.location.href = url;
                }
            });
        },
        getCaptchaImg() {
            this.loadingCaptcha = true;
            initCaptcha().then(res => {
                this.loadingCaptcha = false;
                if (res.success) {
                    this.form.captchaId = res.result;
                    this.captchaImg = drawCodeImage + res.result;
                }
            });
        },
        submit() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    authorize(this.form).then(res => {
                        if (res.success) {
                            // 存储accessToken
                            this.setStore('accessToken', res.result.accessToken);
                            let redictInfo = res.result;
                            // 获取用户信息
                            userInfo().then(res => {
                                if (res.success) {
                                    // 避免超过大小限制
                                    delete res.result.permissions;
                                    let roles = [];
                                    res.result.roles.forEach(e => {
                                        roles.push(e.name);
                                    });
                                    this.setStore('roles', roles);
                                    Cookies.set('userInfo', JSON.stringify(res.result), {
                                        expires: 7
                                    });
                                    this.setStore('userInfo', res.result);
                                    this.$store.commit('setUserInfo', res.result);
                                    // 跳转
                                    let url = redictInfo.redirect_uri + '?code=' + redictInfo.code + '&state=' + redictInfo.state;
                                    window.location.href = url;
                                } else {
                                    this.loading = false;
                                    this.getCaptchaImg();
                                }
                            });
                        } else {
                            this.loading = false;
                            this.getCaptchaImg();
                        }
                    });
                }
            });
        }
    },
    mounted() {
        this.init();
        this.getCaptchaImg();
    }
};
</script>

<style lang="less">
@import './authorize.less';
</style>
